﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Gallery.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <%--START MAIN CONTENT--%>
    <div class="galMainContent">
        <%--START LEFT CONTENT--%>
        <div class="galLeftContent">
            <%--START BUTTONS TO SWITCH VIEW--%>
            <div class="galSwitchViewButtons">
                <telerik:RadButton ID="buttonToggleListView" runat="server" ButtonType="ToggleButton"
                    ToggleType="Radio" GroupName="ImagesView" ToolTip="List View" Width="31" Height="31"
                    CssClass="galBtnListView" Checked="true">
                    <ToggleStates>
                        <telerik:RadButtonToggleState PrimaryIconUrl="Images/gridButtonHover.gif" PrimaryIconTop="10px"
                            PrimaryIconLeft="10px" CssClass="btnSelected" />
                        <telerik:RadButtonToggleState PrimaryIconUrl="Images/gridButton.gif" PrimaryHoveredIconUrl="Images/gridButtonHover.gif"
                            PrimaryIconTop="10px" PrimaryIconLeft="10px" />
                    </ToggleStates>
                </telerik:RadButton>
                <telerik:RadButton ID="buttonToggleGridView" runat="server" ButtonType="ToggleButton" S
                    ToggleType="Radio" GroupName="ImagesView" ToolTip="Grid View" Width="31" Height="31"
                    CssClass="galBtnGridView">
                    <ToggleStates>
                        <telerik:RadButtonToggleState PrimaryIconUrl="Images/listButtonHover.gif" Selected="true"
                            PrimaryIconTop="10px" PrimaryIconLeft="10px" CssClass="btnSelected" />
                        <telerik:RadButtonToggleState PrimaryIconUrl="Images/listButton.gif" PrimaryHoveredIconUrl="Images/listButtonHover.gif"
                            PrimaryIconTop="10px" PrimaryIconLeft="10px" />
                    </ToggleStates>
                </telerik:RadButton>
            </div>
            <%--END BUTTONS TO SWITCH VIEW--%>
            <%--START PLACEHOLDER FOR THE LISTVIEW / GRID--%>
            <script type="text/javascript">
              <!--
                function renderNumericPager(listView) {
                    var index = listView.get_currentPageIndex();
                    var pageCount = listView.get_pageCount();
                    var buttons = [];

                    for (var i = 0; i < pageCount; i++) {
                        buttons.push(String.format("<a href='javascript:void(0);' {0} onclick='$find(\"{1}\").page({2});'><span>{3}</span></a>",
                        i === index ? "class='galCurrentPageButton'" : "",
                        listView.get_id(),
                        i, i + 1));
                    }
                    return buttons.join("\r\n");
                }

                var currentLoadingPanel = null;
                var currentUpdatedControl = null;

                function showLoading() {
                    currentLoadingPanel = $find("<%= loadingPanelDefaultGallery.ClientID %>");
                    if ($find('<%=listViewDefaultGallery.ClientID %>')) {
                        currentUpdatedControl = "listViewWrapper";

                    }
                    else {
                        currentUpdatedControl = "<%= gridDefaultGallery.ClientID %>";
                    }
                    currentLoadingPanel.show(currentUpdatedControl);
                }

                function hideLoading() {
                    if (currentLoadingPanel != null) {
                        currentLoadingPanel.hide(currentUpdatedControl);
                        currentUpdatedControl = null;
                        currentLoadingPanel = null;
                    }
                }
                -->
            </script>
            <telerik:RadAjaxLoadingPanel ID="loadingPanelDefaultGallery" runat="server">
                <img src='<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(Page, typeof(Telerik.Web.UI.RadAjaxLoadingPanel), "Telerik.Web.UI.Skins.Metro.Ajax.loading.gif") %>'
                    alt="Loading..." style="border: 0;" />
            </telerik:RadAjaxLoadingPanel>
            <div id="listViewWrapper">
                <telerik:RadListView ID="listViewDefaultGallery" runat="server" PageSize="9" AllowPaging="true">
                    <ClientSettings>
                        <ClientEvents OnDataBinding="showLoading" OnDataBound="hideLoading" />
                        <DataBinding ItemPlaceHolderID="listViewContainer">
                            <LayoutTemplate>
                    <div id="listViewContainer" class="galListViewWrapper">
                    </div>
                    <div class="galPager">
                        #=renderNumericPager(owner) #
                    </div>
                            </LayoutTemplate>
                            <ItemTemplate>
                        <div class="galListViewItem">
                        <a href="Details.aspx?PhotoID=#=PhotoID#">
                            <img src="CustomHandlers/Images.ashx?photoId=#=PhotoID#"></img> 
                            </a>
							<span class="gallListViewTitle">#=Title#</span>
                            <span class="gallListViewRating">Rate #=Rating#</span>                         
                        </div>
                            </ItemTemplate>
                            <DataService Location="ImagesService/ImagesService.svc" DataPath="GetImages" ResponseType="JSON" />
                        </DataBinding>
                    </ClientSettings>
                </telerik:RadListView>
            </div>
            <script type="text/javascript">
               <!--
                function bindTemplateControls(sender, eventArgs) {
                    var item = eventArgs.get_item();
                    bindImageAndRating(item);
                    bindTitleAndLocation(item);
                }

                //this function sets the source of the images, using a custom HTTP handler - Images.ashx 
                //and populates the rating control for each row
                function bindImageAndRating(item) {
                    var photoId = item.getDataKeyValue("PhotoID");
                    var title = item.getDataKeyValue("Title");
                    var image = item.findElement("imgPhoto");
                    image.src = "CustomHandlers/Images.ashx?photoId=" + photoId;
                    image.alt = title;
                    //set the href to the wrapping <a> to point to the Details.aspx page
                    image.parentNode.href = "Details.aspx?PhotoID=" + photoId;

                    var rating = item.findControl("ratingPhoto");
                    var imageRating = item.getDataKeyValue("Rating");
                    rating.set_value(imageRating);
                }

                //used to populate the columns which displays two fields - Title and Location
                function bindTitleAndLocation(item) {
                    var title = item.getDataKeyValue("Title");
                    var location = item.getDataKeyValue("Location");
                    var titleLabel = item.findElement("labelTitle");
                    titleLabel.value = title;
                    var locationLabel = item.findElement("labelLocation");
                    locationLabel.value = location;
                }

                //renders the external pager for RadGrid
                function renderPager(sender, eventArgs) {
                    var index = sender.get_masterTableView().get_currentPageIndex();
                    var pageCount = sender.get_masterTableView().get_pageCount();
                    var buttons = [];

                    for (var i = 0; i < pageCount; i++) {
                        buttons.push(String.format("<a href='javascript:void(0);' {0} onclick='$find(\"{1}\").get_masterTableView().page({2});'><span>{2}</span></a>",
                        i === index ? "class='galCurrentPageButton'" : "",
                        sender.get_id(),
                        i + 1));
                    }
                    $telerik.$("#divGridPager").empty();
                    $telerik.$("#divGridPager").append(buttons.join("\r\n"));
                    hideLoading();
                }

                //redirects to Details.aspx for the current image
                function redirectToDetails(sender, eventArgs) {
                    var itemIndex = eventArgs.get_itemIndexHierarchical();
                    var item = sender.get_masterTableView().get_dataItems()[itemIndex];
                    var photoId = item.getDataKeyValue("PhotoID");
                    window.location.href = "Details.aspx?PhotoID=" + photoId;
                } 
                -->
            </script>
            <div class="galGridViewWrapper">
                <telerik:RadGrid ID="gridDefaultGallery" runat="server" PageSize="7" AllowPaging="true">
                    <PagerStyle Visible="false" />
                    <MasterTableView ClientDataKeyNames="PhotoID, Title, Rating, Location">
                        <Columns>
                            <telerik:GridTemplateColumn UniqueName="ImageColumn" HeaderText="Photo">
                                <ItemTemplate>
                                    <a href="">
                                        <img id="imgPhoto" runat="server" src="" alt="" style="max-width: 200px" />
                                    </a>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Title" DataField="Title" UniqueName="TitleAndLocation">
                                <ItemTemplate>
                                    <asp:Label ID="labelTitle" runat="server" CssClass="gallTitle"></asp:Label>
                                    <br />
                                    <asp:Label ID="labelLocation" runat="server" CssClass="gallLocation"></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn HeaderText="Description" DataField="Description" UniqueName="Description">
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn UniqueName="RatingColumn" HeaderText="Rating">
                                <ItemTemplate>
                                    <telerik:RadRating ID="ratingPhoto" runat="server" ReadOnly="true" Precision="Exact"
                                        EnableToolTips="false" Skin="Metro">
                                    </telerik:RadRating>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings>
                        <ClientEvents OnRowDataBound="bindTemplateControls" OnDataBound="renderPager" OnRowClick="redirectToDetails"
                            OnDataBinding="showLoading" />
                        <DataBinding Location="ImagesService/ImagesService.svc" SelectMethod="GetImages">
                        </DataBinding>
                    </ClientSettings>
                </telerik:RadGrid>
            </div>
            <div class="galPager" id="divGridPager">
            </div>
            <%--END PLACEHOLDER FOR THE LISTVIEW / GRID--%>
            <%--END LEFT CONTENT--%>
            <!-- /galLeftContent -->
        </div>
        <%--START RIGHT (DETAILS) CONTENT--%>
        <div class="galRightContent">
            <h2>
                The California Dream
            </h2>
            <h3>
                California, USA
            </h3>
            <p>
                California, USA in December – sights and experiences in San Francisco, Huntington
                Beach – Surf City USA, Los Angeles downtown, Hollywood, and The City of Long Beach.
                It’s official : once you visit the Golden State, you are bound to leave it with
                a promise to return…</p>
        </div>
        <%--END RIGHT (DETAILS) CONTENT--%>
        <!-- /galRightContent -->
    </div>
    <%--END MAIN CONTENT--%>
    <!-- /galMainContent -->
    <div class="galPush">
    </div>
    <%--USED FOR POSITIONING THE FOOTER--%>
    <!-- /galPush -->
    </div>
    <%--CLOSE MAIN PAGE WRAPPER--%>
    <!-- /galWrapper -->
</asp:Content>
